<template>
    <div class="tm">
        <div class="tmTitle">天猫官方直营</div>
        <div class="tmShop">
            <div class="cont" v-for="item of list" :class="item.id == 1 || item.id == 3 ? 'change':'' ">
                <p class="market">{{item.title1}}</p>
                <p class="details">{{item.title2}}</p>
                <div class="img">
                    <img :src="item.img1" class="img1" alt="">
                    <img :src="item.img2" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name:"HomeTmdirectly",
        props:{
            list:Array
        }
    }
</script>

<style lang="stylus" scoped>
.tmTitle
    width 3.55rem
    height 0.46rem
    line-height 0.46rem
    font-size: 0.18rem;
    color: #333;
    text-align: left;
    font-weight: 600;
    text-align left
    margin 0 auto 
.tmShop
    width 3.55rem
    height: 3.66rem
    margin 0 auto
    .cont
        float left
        width 49%
        height 1.73rem
        margin-top 2%
        background-image url("//gw.alicdn.com/tfs/TB1_pEok49YBuNjy0FfXXXIsVXa-518-401.png?getAvatar=1_360x10000.jpg_.webp")
        background-size: cover
        background-repeat: no-repeat
        .market
            width 1.7rem
            height 0.36rem
            line-height 0.36rem
            font-size: 0.16rem
            color: rgb(32, 32, 32)
            text-align: left
            padding-left: 0.15rem
            font-weight: 600;
        .details
            font-size: 0.12rem
            color: rgb(113, 112, 112)
            text-align: left
            padding-left: 0.15rem
            line-height: 0.15rem    
        .img
            width 88%
            height 0.63rem
            margin 0 auto
            margin-top 0.24rem
            img 
                width 49%
                float left
            .img1
                margin-right 2%
    .change
        margin-right 2%
</style>

